<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- 引入 layui.css -->
        <link
            rel="stylesheet"
            href="//unpkg.com/layui@2.6.8/dist/css/layui.css"
        />
        <script src="../11.17/jquery-3.6.1.min.js"></script>
        <!-- 引入 layui.js -->
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
        <script src="../city.js"></script>
    </head>
    <style>
        .info {
            width: 40%;
        }
    </style>
    <body>
        <div class="layui-card">
            <div class="layui-card-header">
                欢迎光临<span></span> 的管理后台
            </div>
            <div class="layui-card-body">
                <form
                    class="layui-form info myform"
                    lay-filter="myform"
                    action=""
                >
                    <div class="layui-form-item">
                        <label class="layui-form-label">ID</label>
                        <div style="line-height: 39px" id="userid"></div>
                        <input type="hidden" name="userid" value="" />
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">头像</label>
                        <div class="layui-input-block">
                            <input
                                type="text"
                                name="userimg"
                                required
                                lay-verify="required"
                                autocomplete="off"
                                class="layui-input"
                                value="https://img11.360buyimg.com/n7/jfs/t1/60597/27/17309/97742/613cdee4E94419921/1530636c877dc0c1.jpg"
                            />
                        </div>
                        <img
                            id="userimgs"
                            src="./1.webp"
                            style="
                                width: 100px;
                                hieght: 100px;
                                margin: 20px 124px;
                            "
                            alt=""
                        />
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input
                                type="text"
                                name="username"
                                required
                                lay-verify="required"
                                autocomplete="off"
                                class="layui-input"
                                id="username"
                                disabled
                            />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-block">
                            <input
                                type="text"
                                name="age"
                                required
                                lay-verify="required"
                                autocomplete="off"
                                class="layui-input"
                                placeholder="请输入年龄"
                                id="age"
                            />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-inline" style="width: 23%">
                            <select
                                id="province"
                                lay-filter="province"
                                lay-verify="required"
                                name="province"
                            >
                                <option value="">请选择省</option>
                            </select>
                        </div>
                        <div class="layui-inline" style="width: 23%">
                            <select
                                name="city"
                                id="city"
                                lay-filter="city"
                                lay-verify="required"
                            >
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-inline" style="width: 23%">
                            <select name="area" id="area" lay-verify="required">
                                <option value="">请选择区</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input
                                type="radio"
                                name="sex"
                                value="1"
                                title="男"
                            />
                            <input
                                type="radio"
                                name="sex"
                                value="2"
                                title="女"
                            />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">更新时间</label>
                        <div
                            id="updated_at"
                            style="line-height: 39px"
                            class="layui-input-block"
                        ></div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">注册时间</label>
                        <div
                            id="created_at"
                            style="line-height: 39px"
                            class="layui-input-block"
                        ></div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button
                                class="layui-btn"
                                lay-submit
                                lay-filter="formDemo"
                            >
                                保存信息
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body>
    <script>
        //Demo
        var provinceIndex = 0
        layui.use('form', function () {
            var form = layui.form
            showAddress()
            form.render()

            form.on('select(province)', function (data) {
                showCitys(data.value)
                provinceIndex = data.value
                form.render()
            })
            form.on('select(city)', function (data) {
                showArea(data.value)
                form.render()
            })
            form.on('submit(myform)', function (data) {
                // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                // console.log(data) //当前容器的全部表单字段，名值对形式：{name: value}
                // console.log(123)
                var data1 = form.val('myform')
                let user = {
                    sex: data1.sex,
                    age: data1.age,
                    province: data1.province,
                    city: data1.city,
                    area: data1.area,
                    detail_address: data1.province + data1.city + data1.area,
                    img: data1.userimg,
                }
                $.ajax({
                    url: 'https://api.zzgoodqc.cn/api/user/' + data1.userid,
                    type: 'PUT',
                    data: user,
                    headers: {
                        Authorization:
                            'Bearer ' + localStorage.getItem('token'),
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg('修改成功')
                            updateLocalUser(res.data)
                        } else {
                            layer.msg(res.message)
                        }
                    },
                })
                console.log(data1)
                return false //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            })
        })
        function updateLocalUser(data) {
            localStorage.setItem('userInfo', JSON.stringify(data))
            showUserInfo()
        }
        function showArea(cityIndex) {
            let data = citys[provinceIndex].city[cityIndex].area
            console.log(data)
            let html = '<option value="">请选择区域</option>'
            data.forEach((item, index) => {
                html += `<option value="${index}">${item}</option>`
            })
            $('#area').html(html)
        }
        function showCitys(proIndex) {
            let data = citys[proIndex].city
            let html = '<option value="">请选择市</option>'
            data.forEach((item, index) => {
                html += `<option value="${index}">${item.name}</option>`
            })
            $('#city').html(html)
        }
    </script>
    <script>
        $(function () {
            showUserInfo()
        })
        function showUserInfo() {
            layui.use('form', function () {
                var form = layui.form
                data = localStorage.getItem('userInfo')
                if (data) {
                    data = JSON.parse(data)
                    provinceIndex = data.province
                    showCitys(data.province)
                    showArea(data.city)
                    form.val('myform', {
                        userid: data.id,
                        //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        username: data.username, // "name": "value"
                        age: data.age ?? '',
                        sex: data.sex,
                        userimg: data.img,
                        province: data.province,
                        city: data.city,
                        area: data.area,
                    })
                    $('span').html(data.username)
                    $('#userid').html(data.id)
                    $('#created_at').html(data.created_at)
                    $('#updated_at').html(data.updated_at)
                    $('#userimgs').attr('src', data.img)
                } else {
                    location.href = './登录注册忘记密码页面.html'
                }
                form.render()
            })
        }
        function showAddress() {
            let html = '<option value="">请选择省</option>'
            citys.forEach((item, index) => {
                html += `<option value="${index}">${item.name}</option>`
            })
            $('#province').html(html)
        }
    </script>
</html>
